<template>
    <div>
        <h1>新增卡券</h1>
            <table class="table">
                <tbody>
                    <tr>
                        <td>卡券名称：</td>
                        <td>
                            <input type="text" v-model="data.name">
                        </td>
                    </tr>
                    <tr>
                        <td>门店：</td>
                        <td>
                            <select v-model="data.shopSortId">
                                <option value="0">请选择门店</option>
                                <option v-for="shop in shops" :key="shop.id" :value="shop.id">{{shop.name}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>卡券类型：</td>
                        <td>
                            <select v-model="data.couponTypeId">
                                <option value="0">请选择卡券类型</option>
                                <option v-for="type in types" :key="type.id" :value="type.id">{{type.name}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>使用日期：</td>
                        <td>
                            <span v-for="d in days">
                                 <input type="checkbox" :value="d" v-model="ds"> {{ d }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>有效期：</td>
                        <td>
                            <input type="text" v-model="data.detail" placeholder="有效期">
                        </td>
                    </tr>
                    <tr>
                        <td>价格：</td>
                        <td>
                            <input type="number" v-model="data.price">
                        </td>
                    </tr>
                    <tr>
                        <td>排序：</td>
                        <td>
                            <input type="number" v-model="data.sort">
                        </td>
                    </tr>
                    <tr>
                        <td>状态：</td>
                        <td>
                            <select v-model="data.couponStartId">
                                <option value="0">请选择状态</option>
                                <option v-for="status in statuses" :key="status.id" :value="status.id">{{status.name}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>图片：</td>
                        <td>
                            <input type="file">
                            <img src="" alt="" style="width: 60px;height: 60px;">
                        </td>
                    </tr>
                    <tr>
                        <td>是否启用：</td>
                        <td>
                            <input type="checkbox" v-model="data.isOpen">打勾true启用，否则fase禁用
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit" value="保存" @click="submitForm">
                            <input type="button" value="返回" @click="goBack">
                        </td>
                    </tr>
                </tbody>
            </table>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const data = ref({
    id: 0,
    name: '',
    shopSortId: 0,
    days: '',
    detail: '',
    price: 0,
    sort: 0,
    img: '',
    couponStartId: 0,
    couponTypeId: 0,
    isOpen: true
});


//保存日期使用
const ds=ref([])
//日期使用用于生成多个复选框
const days=ref(["周一","周二","周三","周四","周五","周六","周日"])

//门店
const shops = ref([{
    id: 0,
    name: ''
}]);

//卡券类型
const types = ref([{
    id: 0,
    name: ''
}]);
//状态
const statuses = ref([{
    id: 0,
    name: ''
}]);

// 获取门店列表
const getShops = () => {
    
};

// 获取卡券类型列表
const getTypes = () => {
    
};

// 获取状态列表
const getStatuses = () => {
     
};

// 根据卡券编号获取卡券详情
const getCouponDetail = () => {
    //取地址栏中的卡券编号
    const id = route.query.id;
};

// 保存卡券
const submitForm = () => {
        alert(ds.value.toString())
};

// 返回列表页
const goBack = () => {
    router.push('/');
};

onMounted(() => {
    getShops();    //获取门店列表
    getTypes();    //获取卡券类型列表
    getStatuses(); // 获取状态列表
    getCouponDetail(); //根据卡券编号获取卡券详情,好让网页上显示出数据
});
</script>

<style scoped>

</style> 